<!DOCTYPE html>
<html>
<head>

    <title>a</title>
    <style type="text/css">
        body{
            width: 100%;
            height: 100%;
        }
        .a{
            width: 100%;
            height: 100%;
            -webkit-animation:moveDown 0.6s ease-in-out 0.2s backwards;
            -moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            -o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            -ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
            animation: moveDown 0.6s ease-in-out 0.2s backwards;
        }
        .Time, .Pre, .StuNum{
            -webkit-animation:moveUp 0.8s ease-in-out 0.2s backwards;
            -moz-animation: moveUp 0.8s ease-in-out 0.2s backwards;
            -o-animation: moveUp 0.8s ease-in-out 0.2s backwards;
            -ms-animation: moveUp 0.8s ease-in-out 0.2s backwards;
            animation: moveUp 0.8s ease-in-out 0.2s backwards;
        }
        @-webkit-keyframes moveDown{
            0%{
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-moz-keyframes moveDown{
            0%{
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-o-keyframes moveDown{
            0%{
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-ms-keyframes moveDown{
            0%{
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @keyframes moveDown{
            0%{
                -webkit-transform: translateY(-40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

        /*自定义moveUp动画*/
        @-webkit-keyframes moveUp{
            0%{
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-moz-keyframes moveUp{
            0%{
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-o-keyframes moveUp{
            0%{
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @-ms-keyframes moveUp{
            0%{
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }
        @keyframes moveUp{
            0%{
                -webkit-transform: translateY(40px);
                opacity: 0;
            }
            100%{
                -webkit-transform: translateY(0px);
                opacity: 1;
            }
        }

    </style>
</head>
<body>
<div class="a">
    <div class="Time">
        开设时间： 2017年11月23日
    </div>
    <div class="StuNum">
        授课人数： 200
    </div>
    <div class="Pre">
        上课准备：请同学们学习已经上传的课件，课后老师将针对书里的问题与同学们展开讨论与互动，欢迎大家多在评论区留言，留下自己的想法！
    </div>
</div>
</body>
</html>